<template>
  <div>
    <operation-title
      title="富文本"
      :icon="TitleIcon"
    />
    <div class="divider"></div>
    <div class="func">
      <p class="attr">选择颜色</p>
      <div class="adjust-item">
        <span>底部背景</span>
        <el-color-picker v-model="config.pageConfig.color" />
        <span>{{ config.pageConfig.color }}</span>
      </div>
      <div class="adjust-item">
        <span>组件背景</span>
        <el-color-picker v-model="config.pageConfig.componentcolor" />
        <span>{{ config.pageConfig.componentcolor }}</span>
      </div>
    </div>
    <div class="func">
      <p class="attr">样式</p>
      <ul class="common-ul">
        <li
          @click="config.pageConfig.style = '1'"
          :class="config.pageConfig.style == '1' ? 'active' : ''"
        >
          默认
        </li>
        <li
          @click="config.pageConfig.style = '2'"
          :class="config.pageConfig.style == '2' ? 'active' : ''"
        >
          投影
        </li>
        <li
          @click="config.pageConfig.style = '3'"
          :class="config.pageConfig.style == '3' ? 'active' : ''"
        >
          描边
        </li>
      </ul>
      <div class="adjust-item" v-if="config.pageConfig.style == '3'">
        <el-color-picker v-model="config.pageConfig.borderColor" />
        <span>{{ config.pageConfig.borderColor }}</span>
      </div>
      <div class="adjust-item" v-if="config.pageConfig.style == '3'">
        <el-slider
          v-model="config.pageConfig.borderWidth"
          :min="0"
          :max="5"
          show-input
          size="small"
        />px
      </div>
    </div>

    <div class="divider"></div>
    <div class="func">
      <rich-text
        :model-value="config.pageConfig.content"
        @change="onEditorChange"
      ></rich-text>
    </div>
    <div class="divider"></div>
    <div class="func">
      <p class="attr">边距</p>
      <div class="adjust-item">
        <span>上边距</span>
        <el-slider
          v-model="config.pageConfig.marginTop"
          :min="0"
          :max="50"
          show-input
          size="small"
        />px
      </div>
      <div class="adjust-item">
        <span>下边距</span>
        <el-slider
          v-model="config.pageConfig.marginBottom"
          :min="0"
          :max="50"
          show-input
          size="small"
        />px
      </div>
      <div class="adjust-item">
        <span>左右边距</span>
        <el-slider
          v-model="config.pageConfig.margin"
          :min="0"
          :max="20"
          show-input
          size="small"
        />px
      </div>
    </div>
    <div class="divider"></div>
    <div class="func">
      <p class="attr">圆角设置</p>
      <div class="adjust-item">
        <span>上圆角</span>
        <el-slider
          :min="0"
          :max="20"
          v-model="config.pageConfig.radiusTop"
          show-input
          size="small"
        />px
      </div>
      <div class="adjust-item">
        <span>下圆角</span>
        <el-slider
          :min="0"
          :max="20"
          v-model="config.pageConfig.radiusBottom"
          show-input
          size="small"
        />px
      </div>
    </div>
    <div class="divider"></div>
  </div>
</template>

<script lang="ts">
import RichText from "@/components/RichText.vue";
export default {
  name: "TitleOperation",
  components: {
    RichText,
  },
};
</script>
<script lang="ts" setup>
import { reactive, onMounted } from "vue";
import TitleIcon from "@/assets/app/icon/richtext.png";
import OperationTitle
  from "@/views/activity/actApp/components/default/operationComponents/operationTitle/OperationTitle.vue";

const onEditorChange = (value: any) => {
  console.log("config.pageConfig.content", config.pageConfig.content);
  config.pageConfig.content = value;
};
const config = defineProps({
  pageConfig: {
    type: Object,
    default: {
      style: "1",
      color: "transparent",
      componentcolor: "transparent",
      content: "进入富文本编辑框编辑内容",
      marginTop: 0,
      marginBottom: 0,
      margin: 10,
      radiusTop: 0,
      radiusBottom: 0,
      borderColor: "transparent",
      borderWidth: 1,
    },
  },
});
let emits = defineEmits<{ (e: "changeStyle", configStyle: Object): void }>();

watch(config, (val) => {
  emits("changeStyle", config.pageConfig);
});
</script>

<style lang="scss" scoped>
.title {
  padding: 8px 23px;
  overflow: hidden;
  border-bottom: 5px solid #f6f7f9;
  display: flex;
  position: relative;
  height: 50px;
  box-sizing: border-box;
  img {
    position: absolute;
    left: 0;
    top: -5px;
  }
  h5 {
    font-size: 16px;
    font-weight: 700;
    position: absolute;
    left: 70px;
    top: 0;
    line-height: 50px;
  }
}
.func {
  border-bottom: 5px solid #f6f7f9;
  padding: 20px 16px;
  font-size: 16px;
  .attr {
    line-height: 1;
    color: #47565d;
    font-weight: bolder;
    margin-bottom: 20px;
  }
  ul.common-ul {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    li {
      flex: 1;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px 0 0 4px;
      border: 1px solid #ededed;
      border-collapse: collapse;
      &.active {
        border: 1px solid #fb6638;
      }
      img {
        max-width: 100% !important;
        max-height: 100% !important;
      }
    }
  }
  h4 {
    position: relative;
    padding: 8px 16px 8px 16px;
    border-radius: 6px;
    color: #666;
    font-size: 12px;
    line-height: 22px;
    margin-bottom: 10px;
    border: 1px solid #d8e8fc;
    background-color: #e5f0fe;
  }
  div.adjust-item {
    display: flex;
    align-items: center;
    margin-top: 3px;
    margin-bottom: 10px;
    span {
      width: 64px;
      text-align: right;
      margin-right: 15px;
      color: #666;
    }
    :deep(.el-slider) {
      width: 240px;
      margin-right: 3px;
      margin-left: 15px;
    }
    :deep(.el-slider__runway.show-input) {
      margin-right: 15px;
    }
    :deep(.el-input-number) {
      width: 100px;
      background: #f4f3f7;
      border: 1px solid #f4f3f7;
    }
  }

  .add-item {
    width: 100%;
    list-style: none;
    li {
      background: #f4f3f7;
      border-radius: 4px;
      padding: 10px 20px 10px 10px;
      color: #999;
      margin-top: 10px;
      margin-bottom: 20px;
      position: relative;
      .add-item-input {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        > p {
          width: 50px;
          margin-right: 10px;
        }
        > :deep(.el-icon) {
          font-size: 40px;
        }
        img {
          width: 40px;
          height: 40px;
        }
        :deep(.el-color-picker) {
          margin-right: 10px;
        }
      }
      .sure-close {
        position: absolute;
        right: 5px;
        top: 5px;
        cursor: pointer;
      }
    }
    .extra-li {
      text-align: center;
    }
  }
}
</style>
